{% extends "common/map-viewer-only.html" %}
{% load absurl %}
{% block headtwo %}
    <script type="text/javascript" src="{{MEDIA_URL}}d3.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}stream.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}underscore-min.js"></script>
    <script src="{{MEDIA_URL}}flowplayer/example/flowplayer-3.2.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="{{MEDIA_URL}}jquery.ba-throttle-debounce.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}jquery-autocomplete-r3.2.2/jquery.autocomplete.js"></script>
    <link rel="stylesheet" href="{{MEDIA_URL}}jquery-autocomplete-r3.2.2/jquery.autocomplete.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="{{MEDIA_URL}}search.css" type="text/css" media="screen" charset="utf-8">
    <link rel="stylesheet" href="{{MEDIA_URL}}pyrifera.css" type="text/css" media="screen" charset="utf-8">
    <script type="text/javascript" charset="utf-8">
        google.load("search", "1");
        
        window.supportsSvg = !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect && !window.svgweb;
        
        // alias jQuery for d3.js
        Sizzle = jQuery;
        

        var html_decode = function(h){ return $('<p>'+h+'</p>').text(); };
        var search_url;

        function rsList(){
            var ph = $('#search_panel').parent().parent().parent().height();
            var sph = $('#search_panel').height();
            var sfh = $('#search_footer').height();
            $('#search_list').height(ph - sph - sfh - 31);
        }
        
        var req;
        
        var qValue = '';
        var cOffset = 0;
        
        function onTaxonSubmit(offset, force){
            if(!offset){
                offset = 0;
            }
            var val = $('#query').val();
            if(qValue === val && cOffset === offset && !force){
                return;
            }else{
                if(req && req.abort){
                    req.abort();
                }
                image_queue = [];
                cOffset = offset;
                qValue = val;
                var url = search_url + '?q=' + val;
                if(offset){
                    url = url + '&offset='+offset;
                }
                req = $.getJSON(url, onRetrieveTaxonSearchResults);
            }
        }
        
        function onRetrieveTaxonSearchResults(data){
            $('#search_list').scrollTop(0);
            $('span.count').html(data['count']);
            $('span.offset').html(data['offset']);
            $('span.offset2').html(data['offset2']);
            $('a.nav.back').toggleClass('disabled', data['offset'] === 0);
            $('a.nav.forward').toggleClass('disabled', data['offset2'] >= data['count']);
            $('#search_list ul').html(data['results'].join('\n'));
            loadImages($('#search_list'));
        }

        function setupAutocomplete(el){
            {% load absurl %}
            var base_url = "{% absurl monitoring.views.autocomplete %}";
            search_url = "{% absurl monitoring.views.autocomplete2 %}";

            el.parent().submit(function(e){
                e.preventDefault();
                onTaxonSubmit();
            });
            
            $('#query').keydown($.debounce(200, function(){
                onTaxonSubmit();
            }));
            
            onTaxonSubmit(0, true);
            
                        
            var parent = el.parent().parent().parent();
            parent.find('a.forward').click(function(e){
                if($(this).hasClass('disabled')){
                    return;
                }
                e.preventDefault();
                var offset = (cOffset || 0) + 10;
                onTaxonSubmit(offset);
            });

            parent.find('a.back').click(function(e){
                if($(this).hasClass('disabled')){
                    return;
                }
                e.preventDefault();
                onTaxonSubmit(cOffset - 10 || 0);
            });
            
            $('#search_list a.view_data').die('click');
            $('#search_list a.view_data').live('click', handleDataLinkClick);

            // el.autocomplete({
            //     url: base_url,
            //     delay: 200,
            //     matchSubset: false,
            //     autoFill: false,
            //     onItemSelect: function(){
            //         var i = $('#query');
            //         i.val(html_decode(i.val()));
            //     }
            // });
            google.search.Search.getBranding($('#search_footer .powered')[0], google.search.Search.HORIZONTAL_BRANDING);   
        }
        
        var image_queue;
        var queue_position;
        var search;
        
        google.setOnLoadCallback(function(){
            search = new google.search.ImageSearch();
            search.setSearchCompleteCallback(this, searchComplete, null);
            search.setResultSetSize(1);
            search.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS, google.search.ImageSearch.RIGHTS_REUSE);
            $('#nowShowing a img').live('click', function(){
                clearCurrentDocument();
                var sites_li = $('li.kmltree-item:first')
                if(!sites_li.hasClass('visible')){
                    sites_li.find('.toggler').click();                
                }
            });
        });
                        
        function loadImages(container){
            queue_position = 0;
            image_queue = container.find('.image_results');
            if(queue_position < image_queue.length){
                loadNext();
            }
        }
        
        function loadNext(){
            var el = $(image_queue[queue_position]);
            var term = el.data('search-term');
            if(term && term.length){
                search.execute(term);                
            }else{
                queue_position++;
                if(queue_position < image_queue.length){
                    loadNext();
                }
            }
        }
        
        function searchComplete(){
            if(image_queue.length === 0){
                // probably updated search terms already
                return;
            }
            var el = $(image_queue[queue_position]);
            if(search.results && search.results.length > 0){
                var result = search.results[0];
                var node = result.html.cloneNode(true);
                el.append(node);
                el.css('background-color', 'transparent').css('border', 'none');
                el.find('a.gs-image').click(function(e){
                    window.open(result.originalContextUrl);
                    e.preventDefault();
                });
            }
            queue_position++;
            if(queue_position < image_queue.length){
                loadNext();
            }
        }
        
        
        
        // Begin "View Data" link handling section
        function handleDataLinkClick(e){
            e.preventDefault();
            var a = $(this);
            if(searchChoiceCallback){
                searchChoiceCallback(a);
            }else{
                var href = a.attr('href');
                loadPData(href, a.attr('title'));                
            }
        }
        
        var currentDocument;
        
        function loadPData(href, title){
            var sites_li = $('li.kmltree-item:first')
            if(sites_li.hasClass('visible')){
                sites_li.find('.toggler').click();                
            }
            clearCurrentDocument();
            
            $("a[href='"+href+"']").addClass('loading');
            
            google.earth.fetchKml(ge, href, function(kmlObject){
                $("a[href='"+href+"']").removeClass('loading');
                if(kmlObject){
                    currentDocument = kmlObject;
                    kmlObject.setVisibility(true);
                    ge.getFeatures().appendChild(kmlObject);
                    $('#nowShowing').html('<a href="#"><img src="{{MEDIA_URL}}common/images/close.png"></a>Now showing '+title);
                    $('#nowShowing').show();
                }else{
                    alert('Could not load '+title);
                }
            });            
        }
        
        function clearCurrentDocument(){
          if(currentDocument){
              $('#nowShowing').hide();
              $('#nowShowing').html('');
              if(currentDocument){
                  ge.getFeatures().removeChild(currentDocument);
                  currentDocument = null;
              }
          }
        }
                
        function moveSearchToForeground(){
            var el = $('#spc');
            el.detach();
            $('#panel-holder').append(el);
        }
        
        function moveSearchToBackground(){
            var el = $('#spc');
            el.detach();
            $('#panel-holder').prepend(el);
        }
        
        var searchChoiceCallback = false;
        
        function setSearchChoiceCallback(cback){
            searchChoiceCallback = cback;
        }
        
        function clearSearchChoiceCallback(){
            searchChoiceCallback = false;            
        }
        
    </script>
    <style id="videostyle" type="text/css" media="screen">
        /* styling of the container. */

        div.videos {
            margin:0;
            padding:0;
            padding:0 15px;
            margin-left:-15px;
        }

        a.myPlayer {
        	display:none;
        	width: 460px;
        	height:310px; 
        	text-align:center;
        	margin:5px 0;
        	padding:0;
        	float:left;
            border:none;
        }

        /* play button */
        a.myPlayer img {
        	margin-top:140px;
        	border:0px;
        }

        /* when container is hovered we alter the border color */
        a.myPlayer:hover {
            border:none;
        }

        a.years {
            text-decoration:none;
        }

        a.nowPlaying {
            text-decoration:underline;
        }

        a.years:hover {
            text-decoration:underline;
        }


        /* popup styling */
        p.project img.logo {
            margin-bottom:-5px;
            margin-right:5px;
        }
        
        table.popup h3 {
            padding:0px;
            margin:0px;
            margin-top:5px;
            margin-bottom:2px;
        }
        
        table.popup p {
            padding:3px;
            margin:0;
        }
        
        table.popup {
            margin:0;
            padding:0;
        }
        
        .ui-widget {
          font-size:12px;
        }
        
        li.taxon_result a.loading {
            padding-left:25px;
            background:url({{MEDIA_URL}}common/images/small-loader.gif) no-repeat;
        }
        
        #nowShowing {
            width:200px;
            text-indent:0;
            position:relative;
            left:45px;
            margin:20px 0px 5px 0px;
        }
        
        #nowShowing a {
            position:absolute;
            left:-25px;
            top:2px;
        }
        
        #Monitoring li.KmlNetworkLink > .icon {
            width:12px !important;
            background-size:12px 16px !important;
            -webkit-background-size:12px 16px !important;
            -moz-background-size:12px 16px !important;
        }
        
        p.unsupported {
            padding:3px;
            background-color:#EDE9D4;
            border:solid 1px #998067;
        }
        
        p.unsupported a {
            color:#996E43;
        }
        
        #map img.logo {
            margin-bottom:-5px;
        }
        
    </style>

{% endblock headtwo %}
{% block tabs %}
    <li><a href="#Monitoring"><span>Monitoring Data</span></a></li>
{% endblock tabs %}

{% block tabscontents %}
    <div id="Monitoring">
        {% for project in projects.all %}
        <div class="project" id="project_{{project.pk}}">
            <h2>{{project.name}}</h2>
            <p>
                The Channels Islands National Park’s Kelp Forest Monitoring Program (KFMP) was established in 1981 to collect baseline information about the kelp forest ecosystem within the park. Monitoring began in 1982 with the establishment of 16 permanent long-term monitoring sites established between 1982-1986 at the five northernmost Channel Islands within the park. An additional site was added in 2001 at San Miguel Island, four sites were added at San Clemente Island in 2004 and monitored for only two years.  In 2005, 16 additional sites were added to assist in assessing the effectiveness of the newly established Marine Protected Areas (MPA) around the Channel Islands. These 16 sites were installed to collect baseline data from areas both inside and adjacent to the MPAs for later evaluation. Since their establishment, each Kelp Forest Monitoring (KFM) site has been visited at least once every year to collect size and abundance data on 70 species or groups of taxa that include algae, invertebrates and fish. The KFMP currently monitors 33 permanent sites annually, providing the longest set of fishery independent data along the west coast.
            </p>
            <p>
                Pyrifera is an interactive tool that allows you to visualize the abundance data collected by the kelp forest monitoring program (KFMP) since its inception.  In addition, the KFMP has collected annual videos of the permanent transect since 1985 and these are also available for viewing on line for a virtual visit of the site.  
            </p>
            <p>
                Pan around the globe to see where sampling has taken place. Click on sites to open popups and select "Site Information" to view underwater video transects, species lists, and other information. 
            </p>
            <p>
                To see how organisms are distributed among the sampling sites, click on "Search or Browse Species Data" in the sidebar. You can also view Marine Protected Area boundaries and data layers collected by the Marine Life Protection Act Initiative by clicking on the layers icon above this sidebar.
            </p>
            {# <p> #}
            {#     The National Park Service's Kelp Forest Monitoring Program at  #}
            {#     the California Channel Islands has been collecting valuable  #}
            {#     data on organism size and abundance in nearshore rocky reef  #}
            {#     habitat for nearly three decades. This interactive tool allows #}
            {#     you to visualize these data. #}
            {# </p> #}
            {# <p> #}
            {#     Pan around the globe to see where sampling has taken place.  #}
            {#     Click on sites to open popups and select  #}
            {#     "Site Information" to view underwater video transects, species #}
            {#     lists, and other information. #}
            {# </p> #}
            {# <p> #}
            {#     To see how organisms are distributed among the sampling sites  #}
            {#     , click on "Search or Browse Species Data" in  #}
            {#     the sidebar. You can also view Marine Protected Area  #}
            {#     boundaries and data layers collected by the Marine Life  #}
            {#     Protection Act Initiative by clicking on the layers icon  #}
            {#     above this sidebar. #}
            {# </p> #}
            <div class="project_list_holder">
                <ul class="project_list">
                    <li><a class="search" href="{% url monitoring.views.search project.pk %}" rel="sidebar">Search or Browse Species Data</a></li>
                    <li id="nowShowing" style="display:none;"></li>
                    <li>
                        <div class="tree" data-sites-url="{% absurl monitoring.views.sites_nl project.pk %}" id="project_sites_{{project.pk}}"></div>
                    </li>
                </ul>                
            </div>
        </div>
        <p>
            Channel Islands National Park’s kelp forest monitoring program is one of many monitoring programs in the National Park’s that help to provide valuable resource information to assist in better managing resources for now and future generations.  For more information about the National Park Service’s Inventory and Monitoring Program please visit: 
            <a href="http://science.nature.nps.gov/im/units/medn/im/index.cfm">http://science.nature.nps.gov/im/units/medn/im/index.cfm</a>
        </p>
        <p>
            For more information on the KFMP such as the monitoring handbook which contain monitoring protocols or annual reports, please visit: 
            <a href="http://science.nature.nps.gov/im/units/medn/vitalsigns/kelpforestcommunities.cfm">http://science.nature.nps.gov/im/units/medn/vitalsigns/kelpforestcommunities.cfm</a>
        </p>
        <p>
            Please note a newer version of the handbook is in preparation and we hope to have it available by March, 2012 and draft copies are available upon request.
        </p>
        {# <p> #}
        {#     For more information on how these data were collected, you can  #}
        {#     download the <a href="http://science.nature.nps.gov/im/units/medn/reports/docs/chis_kelp97.pdf" title="manual">the annual report</a> that details the program. #}
        {# </p> #}
        <p>
            We welcome your feedback and suggestions. Please write to <a href="mailto:&#x70;&#x79;&#x72;&#x69;&#x66;&#x65;&#x72;&#x61;&#x40;&#x6D;&#x61;&#x72;&#x69;&#x6E;&#x65;&#x6D;&#x61;&#x70;&#x2E;&#x6F;&#x72;&#x67;">pyrifera@marinemap.org</a>
        </p>    
        {% endfor %}
        <!-- <p><input style="float:left;margin-right:1em;width:50%;padding-top:6px;" type="text" name="search" value="species name" id="search"><a id="speciessearch" href="#" class="button"><span>Search</span></a></p><br style="clear:both;" />
        <div id="sites_tree"></div> -->
    </div>
{% endblock tabscontents %}

{% block layersConfig %}
    options.show_panel = false;
    options.rememberMapExtent = false;
    
    // setup which kml files are shown in the data layers panel
    lingcod.addLayer('{% url public-data-layers %}');

    var search_panel;

    $(lingcod).bind('earthReady', function(e, ge, gex){
        
        {# google.earth.addEventListener(ge, 'balloonopening', balloonOpening); #}
        
        $('#panel-holder').prepend('<div id="spc">');

        search_panel = lingcod.panel({appendTo: $('#spc'), 
            showCloseButton: false});
        
        $('#search_panel a.close').live('click', function(e){
            search_panel.hide();
            e.preventDefault();
        });
        
        google.earth.addEventListener(ge.getWindow(), 'mousedown', function(event) {
            search_panel.hide();
        });
            
        $('.project_list').each(function(){
            var tree_el = $(this).find('.tree');
            var tree = kmltree({
                url: tree_el.data('sites-url'),
                gex: gex,
                mapElement: $('#map3d'),
                element: tree_el,
                bustCache: true,
                setExtent: true,
                displayEnhancedContent: false,
                supportItemIcon: true
            });
            tree.load();
        });
    });
    
    $('.project_list a[rel=sidebar]').live('click', function(e){
        var href = $(this).attr('href');
        e.preventDefault();
        search_panel.showUrl(href, {});
    });
{% endblock layersConfig %}

{% block metanavigation %}
<li><a href="#" id="about">about this site</a></li>    
{% endblock metanavigation %}